<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html dir="ltr" lang="en-US"> <!--<![endif]-->
<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

<title>Calendar :: Caffeine Admin Template</title>

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css" media="screen" />
<link rel='stylesheet' href='js/fullcalendar/fullcalendar.css' type='text/css' />
<link rel='stylesheet' href='js/fullcalendar/fullcalendar.print.css' type='text/css' media='print' />
<link rel="stylesheet" href="css/icons.css" type="text/css" />
<link rel="stylesheet" href="css/forms.css" type="text/css" />
<link rel="stylesheet" href="css/tables.css" type="text/css" />
<link rel="stylesheet" href="css/ui.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/responsiveness.css" type="text/css" />

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- Full Calendar -->
<script type='text/javascript' src='js/fullcalendar/fullcalendar.min.js'></script>
<!-- Knob -->
<script type="text/javascript" src="js/jquery.knob.js"></script>

<!-- Caffeine custom JS -->
<script type="text/javascript" src="js/custom.js"></script>

<script type="text/javascript">
	jQuery(document).ready(function() {
		// Calendar
		$('#external-events .external-event').each(function() {		
			// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
			// it doesn't need to have a start or end
			var eventObject = {
				title: $.trim($(this).text()) // use the element's text as the event title
			};
			// store the Event Object in the DOM element so we can get to it later
			$(this).data('eventObject', eventObject);
			// make the event draggable using jQuery UI
			$(this).draggable({
				zIndex: 999,
				revert: true,      // will cause the event to go back to its
				revertDuration: 0  //  original position after the drag
			});
		}).css('cursor', 'move');
		var calendar = jQuery('#calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
				var title = prompt('Event Title:');
				if (title) {
					calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
				}
				calendar.fullCalendar('unselect');
			},
			editable: true,
			droppable: true, // this allows things to be dropped onto the calendar !!!
			drop: function(date, allDay) { // this function is called when something is dropped
			
				// retrieve the dropped element's stored Event Object
				var originalEventObject = $(this).data('eventObject');
				
				// we need to copy it, so that multiple events don't have a reference to the same object
				var copiedEventObject = $.extend({}, originalEventObject);
				
				// assign it the date that was reported
				copiedEventObject.start = date;
				copiedEventObject.allDay = allDay;
				
				// render the event on the calendar
				// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
				$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
				
				// is the "remove after drop" checkbox checked?
				$(this).remove();			
			}
	
		});
	});
</script>

<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 
<!--[if lte IE 7]> <script src="js/IE8.js" type="text/javascript"></script> <![endif]--> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/> <![endif]-->  

</head>

<body id="index" class="home">
    <div id="loading-block"></div>
    
    <div id="container">

        <?php include 'header.php';?>
        <div class="clear"></div>
        <?php include 'navigator.php';?>

        <section id="playground">
            <?php include 'breadcrumb.php';?>
            <?php include 'search-box.php';?>
            
            <div class="clear"></div>
            
            <section class="full-width">
            	<div class="box no-bg">
	            	<h1>Calendar</h1>
                    <p>A fully styled version of <a href="http://arshaw.com/fullcalendar/">FullCalendar jQuery</a> script is included together with it's full original documentation.</p>
                </div>
            </section>
            
            <div class="clear"></div>
            
            <section class="four-fifths">
            	<div class="box">
                	<div class="inner">
                    	<div class="contents">
		                	<div id='calendar'></div>
                        </div>
                    </div>
                </div>
            </section>
            
            <section class="one-fifth">
            	<div id='external-events'>
                    <h4>Draggable Events</h4>
                    <ul class="no-bullets">
	                    <li class='external-event'><span class="icon entypo write"></span> Add a post about the ZOO</li>
                        <li class='external-event'><span class="icon entypo close"></span> Delete Spam</li>
                        <li class='external-event'><span class="icon awesome thumbs-down"></span> Ban some user</li>
                        <li class='external-event'><span class="icon awesome envelope"></span> Write e-mail to friend</li>
                    </ul>
                </div>
            </section>
            
            <div class="clear"></div>
            <div class="full-width right">
	<div class="box no-bg">
    	<div class="line-separator"></div>
        
		<span class="copyright">by <a href="http://www.creepypixel.com/" class="creepy-logo fright"></a></span>
    </div>
</div>        </section>    </div>
    
</body> 
</html>